// import logo from "./logo.svg";
// import "./App.css";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Col, Row, Tree } from "antd";
import { fetchCategoryList, setCategoryCode } from "./store/modules/categoryStore";
import { fetchFoodList } from "./store/modules/foodStore";

function App() {
  const rowStyle = {
    margin: "10px",
  };
  const dispatch = useDispatch();
  const { categoryList } = useSelector((state) => state.category);
  const { categoryCode } = useSelector((state) => state.category);
  const { foodList } = useSelector((state) => state.food);

  // 监听 categoryCode 变化
  useEffect(() => {
    // console.log("监听到 categoryCode 变化");
    if (categoryCode) {
      dispatch(fetchFoodList(categoryCode));
    }
  }, [categoryCode, dispatch]);
  const initCategoryList = () => {
    dispatch(fetchCategoryList());
  };
  const onTreeNodeSelect = (selectedKeys, info) => {
    // console.log("on tree node select, info", info);
    let categoryCode = info.node.code;
    dispatch(setCategoryCode(categoryCode));
  };
  useEffect(() => {
    initCategoryList();
  }, []);
  return (
    <div>
      <Row style={rowStyle}>
        <Col span={4}>
          <Tree treeData={categoryList} key={"code"} onSelect={onTreeNodeSelect}></Tree>
        </Col>
        <Col span={20}>
          {foodList.map((item) => {
            return <div key={item.code}>{item.title}</div>;
          })}
        </Col>
      </Row>
    </div>
  );
}

export default App;
